<!-- 不能添加文本，不能使用网图 -->
<template>
<qrcode-vue 
:value="Data" 
:size="200"  
background="#FFFFFF"  
foreground="#333666"
:image-settings="imageSettings"
:id="`qr-${index}`"  
ref="qrCanvas"
></qrcode-vue> 
<button style="width: 100px;height: 40px;" outlined @click="() => download(index)">下载二维码</button>
</template>

<script setup>

//npm install qrcode.vue
import { ref ,onMounted} from 'vue';
import QrcodeVue from 'qrcode.vue';
import tree from'@/assets/tree.jpg'
 
const Data = ref('1111');//扫码出现的内容或链接
const qrCanvas = ref(null);
const index = ref(0); // 假设只有一个二维码，如果是动态生成的，需要根据实际情况调整

const imageSettings=ref({
        src: tree, // 图片地址  
        // 网图会出现跨域问题 Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’:
        // Tainted canvases may not be exported.
        width: 50, // 图片宽度
        height: 50, // 图片高度
        excavate: true // 是否“挖掘”周围模块
      })

//下载二维码
const download=(index)=>{
    console.log('点击按钮下载二维码');
    //获取canvas标签
    // const canvas = qrCanvas.value.$el; // ref获取不到
    let canvas = document.getElementById(`qr-${index}`) //id获取_1

/*
   //id获取_2
   //id放在父元素上，可以打印出来canvas结果
   //下载二维码 通过类名id获取canvas  v-for里面index用来做区分
    <div :class="isPc ? 'scan-code': 'scan-code_'" :id="`qr-${index}`">
      <qrcode-vue :value="item.code|| 'no something'" :size="100"></qrcode-vue>
      <tm-button style="width: 100px;height: 40px;" outlined @click="() => download(index)">下载二维码</tm-button>
    </div>
    let canvas = document.getElementById(`qr-${index}`).getElementsByTagName('canvas')[0]
    console.log(canvas,'canvas');    
*/

    if (!canvas) {
      console.error(`无法找到 canvas 元素 ${index}`);
      return;
    }
    

	//创建a标签
	let a = document.createElement('a')
	//获取二维码的url并赋值为a.href
	a.href = canvas.toDataURL('img/png')
	//设置下载文件的名字
    a.download = `QrCode_${index}.png`;
	//点击事件，相当于下载
	a.click()
     // 提示信息
    alert(`二维码 ${index} 已下载`);
}


</script>

<style lang="scss" scoped>

</style>